import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import MonitorFrame from './MonitorFrame';
import { videoTypeSet } from '../Apis/Types';

interface IProps {
    mode: string;
}

const MonitorPanel = (props: IProps) => {
    const mode = props.mode;
    return (
        <Box sx={{mt: 5, mb: 10, pr: 2, pl: 2}}>
            <Grid container spacing={3}>
                <Grid item xs={6}>
                    <MonitorFrame videoName={`${mode}-1`} />
                </Grid>
                <Grid item xs={6}>
                    <MonitorFrame videoName={`${mode}-2`} />
                </Grid>
                <Grid item xs={6}>
                    <MonitorFrame videoName={`${mode}-3`} />
                </Grid>
                <Grid item xs={6}>
                    <MonitorFrame videoName={`${mode}-4`} />
                </Grid>
            </Grid>
        </Box>
    )
}

export default MonitorPanel;